<template>
    <div>
        <div class="btn-box">
            <el-button type="primary" @click="addNewData"> 新增 </el-button>
            <el-button type="primary" @click="deleteData"> 删除 </el-button>
            <el-button type="primary" @click="openChildData"> 分票报关 </el-button>
        </div>
        <el-table
            :data="data.docWorkCtnList"
            stripe
            border
            :cell-class-name="tableCellClassName"
            size="small"
            @cell-click="cellClick"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" fixed />
            <el-table-column label="箱号" width="100">
                <template #default="scope">
                    <div v-if="scope.row.index === rowIndex && scope.column.index === columnIndex">
                        <el-input v-model="scope.row.ctnNo" ref="ctnNoRef" size="small"> </el-input>
                    </div>
                    <span v-else>
                        {{ scope.row.ctnNo }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="封号" width="100">
                <template #default="scope">
                    <div v-if="scope.row.index === rowIndex && scope.column.index === columnIndex">
                        <el-input v-model="scope.row.ctnSeal" ref="ctnSealRef" size="small">
                        </el-input>
                    </div>
                    <span v-else>
                        {{ scope.row.ctnSeal }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="箱型" width="150">
                <template #default="scope">
                    <div v-if="scope.row.index === rowIndex && scope.column.index === columnIndex">
                        <el-select
                            v-model="scope.row.containerCode"
                            size="small"
                            filterable
                            ref="containerCodeRef">
                            <el-option
                                v-for="item in defaultBoxSizeOption"
                                :key="item.id"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <span v-else>
                        {{ scope.row.containerCode }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="箱皮重" width="100">
                <template #default="scope">
                    <div v-if="scope.row.index === rowIndex && scope.column.index === columnIndex">
                        <el-input-number
                            v-model="scope.row.containerTareWeight"
                            ref="containerTareWeightRef"
                            size="small"
                            @change="ToVGMWeight(scope.row, scope.$index)">
                        </el-input-number>
                    </div>
                    <span v-else>
                        {{ scope.row.containerTareWeight }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="件数" width="100">
                <template #default="scope">
                    <div v-if="scope.row.index === rowIndex && scope.column.index === columnIndex">
                        <!-- <el-input-number
              v-model="scope.row.digit"
              ref="digitRef"
              size="small"
            >
            </el-input-number> -->
                        <el-input
                            v-model="scope.row.digit"
                            size="small"
                            ref="digitRef"
                            @input="scope.row.digit = validateNumber(scope.row.digit)">
                        </el-input>
                    </div>
                    <span v-else>
                        {{ scope.row.digit }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="毛重" width="100">
                <template #default="scope">
                    <div v-if="scope.row.index === rowIndex && scope.column.index === columnIndex">
                        <el-input-number
                            v-model="scope.row.grossWeight"
                            ref="grossWeightRef"
                            size="small"
                            @change="ToVGMWeight(scope.row, scope.$index)">
                        </el-input-number>
                    </div>
                    <span v-else>
                        {{ scope.row.grossWeight }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="体积" width="100">
                <template #default="scope">
                    <div v-if="scope.row.index === rowIndex && scope.column.index === columnIndex">
                        <el-input-number v-model="scope.row.volume" ref="volumeRef" size="small">
                        </el-input-number>
                    </div>
                    <span v-else>
                        {{ scope.row.volume }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="称重方式" width="150">
                <template #default="scope">
                    <div v-if="scope.row.index === rowIndex && scope.column.index === columnIndex">
                        <el-select
                            v-model="scope.row.vgmWeightType"
                            ref="vgmWeightTypeRef"
                            size="small">
                            <el-option value="SM1" />
                            <el-option value="SM2" />
                        </el-select>
                    </div>
                    <span v-else>
                        {{ scope.row.vgmWeightType }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="VGM总毛重" width="100">
                <template #default="scope">
                    <div v-if="scope.row.index === rowIndex && scope.column.index === columnIndex">
                        <el-input
                            v-model="scope.row.vgmWeight"
                            ref="vgmWeightRef"
                            size="small"
                            disabled>
                        </el-input>
                    </div>
                    <span v-else>
                        {{ scope.row.vgmWeight }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="称重时间" width="200">
                <template #default="scope">
                    <div v-if="scope.row.index === rowIndex && scope.column.index === columnIndex">
                        <el-date-picker
                            v-model="scope.row.vgmWeightTime"
                            type="datetime"
                            size="small"
                            ref="vgmWeightTimeRef"
                            value-format="YYYY-MM-DD HH:mm:ss" />
                    </div>
                    <span v-else>
                        {{ scope.row.vgmWeightTime }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="装箱日期" width="150">
                <template #default="scope">
                    <div v-if="scope.row.index === rowIndex && scope.column.index === columnIndex">
                        <el-date-picker
                            v-model="scope.row.packTime"
                            type="date"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            size="small"
                            ref="packTimeRef" />
                    </div>
                    <span v-else>
                        {{
                            scope.row.packTime
                                ? $utils.formatDateTime(scope.row.packTime, 'YYYY-MM-DD')
                                : ''
                        }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="装箱联系人" width="100">
                <template #default="scope">
                    <div v-if="scope.row.index === rowIndex && scope.column.index === columnIndex">
                        <el-input v-model="scope.row.packLinkman" ref="packLinkmanRef" size="small">
                        </el-input>
                    </div>
                    <span v-else>
                        {{ scope.row.packLinkman }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="车队号" width="150">
                <template #default="scope">
                    <div>
                        <selectDown
                            v-model:modelData="scope.row.truckCode"
                            ref="truckCodeRef"
                            placeholder="请输入后搜索"
                            urlType="buenterprise"
                            urlQueryData="车队"
                            @getOption="getTruckCodeData($event, scope.$index)">
                        </selectDown>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="车队名" width="100">
                <template #default="scope">
                    <div>
                        <el-input
                            v-model="scope.row.truckName"
                            ref="truckNameRef"
                            size="small"
                            disabled>
                        </el-input>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="车牌号" width="100">
                <template #default="scope">
                    <div v-if="scope.row.index === rowIndex && scope.column.index === columnIndex">
                        <el-input v-model="scope.row.numberplate" ref="numberplateRef" size="small">
                        </el-input>
                    </div>
                    <span v-else>
                        {{ scope.row.numberplate }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="司机号码" width="100">
                <template #default="scope">
                    <div v-if="scope.row.index === rowIndex && scope.column.index === columnIndex">
                        <el-input v-model="scope.row.driverMemo" ref="driverMemoRef" size="small">
                        </el-input>
                    </div>
                    <span v-else>
                        {{ scope.row.driverMemo }}
                    </span>
                </template>
            </el-table-column>
        </el-table>
        <childTable
            v-if="initChildTable"
            v-model:detailData="data.docWorkCtnList[childFrIndex].docWorkCtnDetailList"
            v-model:outshow="childDialogShow"
            :boxName="data.docWorkCtnList[childFrIndex].ctnNo"
            :boxdigit="Number(data.docWorkCtnList[childFrIndex].digit)"
            :boxgrossWeight="data.docWorkCtnList[childFrIndex].grossWeight"
            :boxvolume="data.docWorkCtnList[childFrIndex].volume">
        </childTable>
    </div>
</template>

<script>
import { defineComponent, toRaw } from 'vue'
import selectDown from './selectDown.vue'
import childTable from './docDetailBoxTableChild.vue'
import { validateOnlyNumberTwo, validateNumber } from '@/utils/validate.js'
export default defineComponent({
    components: {
        selectDown,
        childTable,
    },
    props: {
        //详细数据
        detailData: {
            type: Object,
            default: () => {},
        },
        defaultBoxSizeOption: {
            type: Array,
            default: () => [],
        },
    },
    emits: ['update:detailData'],
    computed: {
        data: {
            get() {
                return this.detailData
            },
            set(value) {
                this.$emit('update:detailData', value)
            },
        },
    },
    data() {
        return {
            rowIndex: -1, //行索引
            columnIndex: -1, //列索引

            tableSelect: [],
            //分票报关的父数据下标
            childFrIndex: -1,
            childDialogShow: false,
            initChildTable: false,
        }
    },
    methods: {
        validateNumber,

        tableCellClassName({ row, column, rowIndex, columnIndex }) {
            column.index = columnIndex
            row.index = rowIndex
        },
        //单元格被点击时会触发该事件
        cellClick(row, column, cell, event) {
            this.rowIndex = row.index
            this.columnIndex = column.index

            // this.$nextTick(() => {
            //   if (column.label == "箱号") {
            //     this.$refs["ctnNoRef"].focus();
            //     //   console.log(this.$refs["ctnNoRef"]); 自动聚焦失效
            //   } else if (column.label == "封号") {
            //     this.$refs["ctnSealRef"].focus();
            //   } else if (column.label == "箱型") {
            //     this.$refs["containerCodeRef"].focus();
            //   } else if (column.label == "箱皮重") {
            //     this.$refs["containerTareWeightRef"].focus();
            //   } else if (column.label == "件数") {
            //     this.$refs["digitRef"].focus();
            //   } else if (column.label == "毛重") {
            //     this.$refs["grossWeightRef"].focus();
            //   } else if (column.label == "体积") {
            //     this.$refs["volumeRef"].focus();
            //   } else if (column.label == "称重方式") {
            //     this.$refs["vgmWeightTypeRef"].focus();
            //   }
            //   // else if (column.label == "VGM总毛重") {
            //   //   this.$refs["vgmWeightRef"].focus();
            //   // }
            //   else if (column.label == "称重时间") {
            //     this.$refs["vgmWeightTimeRef"].focus();
            //   } else if (column.label == "装箱日期") {
            //     this.$refs["packTimeRef"].focus();
            //   } else if (column.label == "装箱联系人") {
            //     this.$refs["packLinkmanRef"].focus();
            //   } else if (column.label == "车队号") {
            //     this.$refs["truckCodeRef"].focus();
            //   }
            //   // else if (column.label == "车队名") {
            //   //   this.$refs["truckNameRef"].focus();
            //   // }
            //   else if (column.label == "车牌号") {
            //     this.$refs["numberplateRef"].focus();
            //   } else if (column.label == "司机号码") {
            //     this.$refs["driverMemoRef"].focus();
            //   }
            // });
        },
        //输入框失去焦点事件
        inputBlur(scope) {
            this.rowIndex = -1
            this.columnIndex = -1
        },
        /**
         * 选择后的数据
         */
        handleSelectionChange(val) {
            let arr = []
            for (let item of val) {
                let ret = toRaw(item)
                if (ret !== undefined) {
                    arr.push(ret)
                }
            }
            this.tableSelect = arr
        },
        /**
         * 车队下拉选择
         */
        getTruckCodeData(e, index) {
            console.log(e)
            this.data.docWorkCtnList[index].truckCode = e.leftName
            this.data.docWorkCtnList[index].truckName = e.rigthName
            this.data.docWorkCtnList[index].truckId = e.id
        },
        addNewData() {
            this.data.docWorkCtnList.push({
                docId: this.$route.query.id,
                ctnNo: '', //箱号
                ctnSeal: '', //封号
                containerCode: '', //箱型
                containerTareWeight: '', //箱皮重
                digit: 0, //件数
                grossWeight: 0, //毛重
                volume: 0, //体积
                vgmWeightType: '', //称重方式
                vgmWeight: '', //VGM总毛重
                vgmWeightTime: '', //称重时间
                packTime: '', //装箱日期
                packLinkman: '', //装箱联系人
                truckCode: '', //车队号
                truckName: '', //车队名
                numberplate: '', //车牌号
                driverMemo: '', //司机号码
            })
        },
        deleteData() {
            if (this.tableSelect.length > 0) {
                for (let i = this.tableSelect.length - 1; i >= 0; i--) {
                    let deleteIndex = this.data.docWorkCtnList.findIndex(
                        (t) => t == this.tableSelect[i]
                    )
                    if (deleteIndex > -1) {
                        this.data.docWorkCtnList.splice(deleteIndex, 1)
                    }
                }
            } else {
                this.$message.error('请先选择')
            }
        },
        openChildData() {
            if (this.tableSelect.length == 1) {
                this.childFrIndex = this.data.docWorkCtnList.findIndex(
                    (initem) => initem == this.tableSelect[0]
                )
                this.data.docWorkCtnList[this.childFrIndex].docWorkCtnDetailList =
                    this.data.docWorkCtnList[this.childFrIndex].docWorkCtnDetailList || []
                this.initChildTable = true
                this.$nextTick(() => {
                    this.childDialogShow = true
                })
            } else {
                this.$message.warning('请选择一条数据')
            }
        },
        ToVGMWeight(row, index) {
            this.data.docWorkCtnList[index].vgmWeight =
                Math.round((row.containerTareWeight + row.grossWeight) * 100) / 100
        },
    },
    watch: {},
})
</script>

<style lang="scss" scoped>
:deep(.el-table--border .el-table__inner-wrapper) {
    height: 280px;
}
.btn-box {
    margin-bottom: 8px;
}

:deep(.el-table) {
    .el-table__header th {
        background-color: #f7f8fa;
    }

    .cell {
        height: 28px;
        line-height: 28px;
    }

    .el-table_1_column_1 .cell {
        display: flex;
        align-items: center;
        height: 100%;
    }

    .el-table__cell {
        padding: 0;
        height: 28px;
    }

    .el-input-number {
        width: 100%;

        .el-input__inner {
            text-align: left;
            padding: 0 8px;
        }

        .el-input-number__decrease {
            display: none;
        }

        .el-input-number__increase {
            display: none;
        }
    }

    .el-input__inner {
        padding: 0 8px;
    }

    .el-date-editor {
        .el-input__prefix {
            display: none;
        }
    }
}

:deep(.el-checkbox) {
    height: 100%;
}
</style>
